import { Menu } from 'antd';
import {useState, useEffect} from 'react'
import { useLocation } from 'react-router-dom'
import {useStore} from '@/store'
import {observer} from 'mobx-react-lite'
import {useNavigate} from 'react-router-dom'


const Menus = () => {
    const { pathname } = useLocation()
    const path = pathname.split("/")
    const api = path[path.length - 1]

    const {menuStore} = useStore()
    const [menus, setMenus] = useState([])

    useEffect(() => {
        const fn = async ()=>{
          const items = await menuStore.getMunes()
          setMenus(items)
        }
        fn()
    }, [menuStore])

    const navigate = useNavigate()
    const handleClick = ({ item, key, keyPath, domEvent }) => {
      navigate(item.props.path, {replace: true})
    }

    return (
        <div
          style={{
            width: 256,
          }}
        >
          <Menu
            onClick={handleClick}
            defaultOpenKeys={['sys']}
            defaultSelectedKeys={[pathname === "/" ? "home" : api]}
            mode="inline"
            theme="dark"
            items={menus}
          />
        </div>
      );
}
export default observer(Menus)